<script>
import Vue from 'vue'
<<<<<<< HEAD
import { mapGetters } from 'vuex'
import { NavBar, List, PullRefresh, Cell } from 'vant'
import Searchbar from '@/components/Searchbar.vue'
=======
import { mapGetters, mapActions } from 'vuex'
import { List, PullRefresh } from 'vant'
import CookbookSearchBar from '@/components/CookbookSearchBar.vue'
>>>>>>> before-10-1

Vue.use(List)
Vue.use(PullRefresh)

export default {
  components: {
<<<<<<< HEAD
    Searchbar
  },

=======
    CookbookSearchBar
  }, 
  
>>>>>>> before-10-1
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,
<<<<<<< HEAD
      page: 0
=======

      // 记录当前页
      page: 0,

      // 记录keywords
      keywords: ''
>>>>>>> before-10-1
    }
  },

  methods: {
    ...mapActions(['loadData']),
    onClickLeft() {
      this.$router.back()
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
<<<<<<< HEAD
          // 如果是下来刷新，只取第一页
          this.page = 0
          this.refreshing = false;
        }

        // 如果是上拉加载，页数加一
        this.page++
        this.loading = false;

        // 如果keywords为空，则全部渲染
        if (this.page >= this.listPageSize(this.$route.query.keywords)) {
=======
          this.page = 0
          this.refreshing = false
        }

        // 加载数据的逻辑
        // 由于数据已经实现加载好了，因此我们只需要将页码加一即可
        this.page++

        // 不显示loading, 表示上拉的时候还有数据
        this.loading = false;

        // 判断到底的逻辑，表示没有数据了，可以不用再拉了
        if (this.page >= this.pageSize(this.$route.query.keywords)) {
>>>>>>> before-10-1
          this.finished = true;
        }
      }, 1000);
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },

  computed: {
<<<<<<< HEAD
    ...mapGetters(['filteredList', 'listPageSize']),

    list() {
      let result = this.filteredList(this.page * 10, this.$route.query.keywords)
      return result
    },

    totalPage() {
      return this.listPageSize(this.$route.query.keywords)
    },

    finishedText() {
      return this.list.length === 0 ? '没有搜索到这个美食' : '没有更多了'
    }
  },

  watch: {
    $route(to, from) {
      this.page = 1
      this.onLoad()
=======
    ...mapGetters(['filteredList', 'pageSize']),
    list: {
      get() {
        return this.filteredList(this.page * 10, this.keywords)
      },
      set() {
        
      }
    }
  },

  watch: {
    $route: {
      handler(to, from) {
        this.keywords = to.query.keywords
      },

      immediate: true
    }
  },

  mounted() {
    if (this.list.length <= 0) {
      this.loadData()
>>>>>>> before-10-1
    }
  }
}
</script>

<template>
  <div class="list">
<<<<<<< HEAD
    <Searchbar 
      :keywords="$route.query.keywords"
    ></Searchbar>
=======
    <CookbookSearchBar
      :keywords="keywords"
    ></CookbookSearchBar>
>>>>>>> before-10-1
    <div class="list-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
<<<<<<< HEAD
          :finished-text="finishedText"
=======
          :finished-text="list.length === 0 ? '没有搜索到这个菜' : '没有更多了'"
>>>>>>> before-10-1
          @load="onLoad"
        >
          <ul>
            <li v-for="li in list">
              <div>
                <img :src="li.img" alt="">
              </div>
              <div>
                <h1>{{li.name}}</h1>
                <h2>{{li.burdens}}</h2>
                <h3>{{li.all_click}}浏览 {{li.favorites}}收藏</h3>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/border.scss';
@import '@/assets/ellipsis.scss';

.list {
  height: 100%;
  display: flex;
  flex-direction: column;
<<<<<<< HEAD
  div.list-titlebar {
    height: .44rem;
  }
  div.list-content {
    height: 100%;
=======
  .list-content {
    height: 100%;
    flex: 1;
>>>>>>> before-10-1
    overflow-y: scroll;
    ul {
      background: #fff;
      li {
        height: .9rem;
        display: flex;
        padding: .1rem;
        > div:first-child {
          width: 1.05rem;
          img {
            width: 1.05rem;
            height: .7rem;
            padding-right: .1rem;
          }
        }
        > div:last-child {
          h1 {
            font-size: .18rem;
            color: #000;
          }
<<<<<<< HEAD

          h2,h3 {
            font-weight: 100;
            color: #666;
          }

=======

          h2, h3 {
            color: #666;
          }
  
>>>>>>> before-10-1
          h2 {
            @include ellipse(1)
          }
        }
        @include border_1px(0 0 1px 0, #ccc)
      }
    }
  }
}

</style>
